import { Input, Modal } from 'antd';
import { useEffect, useState } from 'react';
import { message } from '../../../functionalComponent';
import { tableAttachSaveRemark } from '../service';

export const RemarkModal = (props) => {
  const { data, visible, disabled, onCancel, onSaved } = props;
  const { asrFid, asrRemark } = data || {};
  const [remark, setRemark] = useState('');

  useEffect(() => {
    visible && setRemark(asrRemark);
  }, [asrRemark, visible]);
  return (
    <Modal
      open={visible}
      title="修改备注"
      onOk={() => {
        if (disabled) {
          onCancel();
          return;
        }
        tableAttachSaveRemark({
          fileId: asrFid,
          remark
        }).then((res) => {
          if (res?.code === 0) {
            message.success('备注保存成功');
            onSaved();
            onCancel();
          }
        });
      }}
      onCancel={onCancel}
      okText="保存"
    >
      <Input.TextArea
        disabled={disabled}
        rows={5}
        value={remark}
        onChange={(e) => setRemark(e.target.value)}
        maxLength={500}
      />
    </Modal>
  );
};
